<template>
  <div class="container">
    <div class="top">
      <h2>患教活动信息</h2>
      <div class="container-inner">
        <el-descriptions>
          <el-descriptions-item label="活动主题">{{ info.name ? info.name:'未填写' }}</el-descriptions-item>
          <el-descriptions-item label="主持人">{{ info.host ? info.host : '未填写'}}</el-descriptions-item>
          <el-descriptions-item label="目标人数">{{ info.count ? info.count :'未填写' }}</el-descriptions-item>
          <el-descriptions-item label="直播时间">{{ info.liveTime ? info.liveTime:'未填写' }}</el-descriptions-item>
          <el-descriptions-item label="报名开始时间">{{ info.signendTime ? info.signendTime: '未填写'}}</el-descriptions-item>
          <el-descriptions-item label="患教费用">{{ info.money ? info.money : '未设置'}}</el-descriptions-item>
          <el-descriptions-item label="患教说明:">{{ info.activityDescription? info.activityDescription : '未填写'}}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="down">
      <h2>患教活动报名信息</h2>
      <div class="container-table">
        <el-table :data="tableData" height="250" style="width: 80%" border >
          <el-table-column prop="patientName" label="姓名" width="180" />
          <el-table-column prop="sex" label="性别" width="180">
            <template #default="scope">
              <el-tag type="primary" v-if="scope.row.sex === 0">男</el-tag>
              <el-tag type="primary" v-else>女</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="patientIllnessLength" label="病龄" />
          <el-table-column prop="patientSignupTime" label="报名时间" />
          <el-table-column prop="patientIfview" label="是否观看">
            <template #default="scope">
              <span v-if="scope.row.sex === 0">否</span>
              <span v-else>是</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getActivityById, getActivityUser } from "@/api/patient/patient";
// export default {
//   data() {
//     return {
//       info: {
//         name: "关爱癫痫从我做起",
//         host: "1",
//         count: "",
//         liveTime: "",
//         signstartTime: "",
//         signendTime: "",
//         money: "",
//       },
//       id:null
//     };
//   },
//   setup() {
//     const router = useRouter();
//     onMounted(() => {
//     // console.log('router:', router.currentRoute.value.query.id)
//     this.id = router.currentRoute.value.query.id
//     console.log(this.id)
//     // this.info = getPatientById(this.id).data
// })
//   }
// };

//根据id查询患教活动

const info = ref({});
const router = useRouter();
const id = ref(1);
const getPatientById = () => {
  id.value = router.currentRoute.value.query.id;
  getActivityById(id.value).then((res) => {
    if (res.code == 200) {
      info.value = res.data;
    }
  });
};
const tableData = ref([])
const getSignupById = () => {
  getActivityUser(id.value).then((res) => {
    if(res.code == 200){
      console.log(tableData)
      tableData.value = res.data
    }
  })
}
onMounted(() => {
  getPatientById();
  getSignupById();
});
</script>

<style lang="less" scoped>
h2 {
  text-align: center;
}
.container {
  margin: 0 20px;
  .inner {
    .box1 {
      width: 10px;
      height: 50px;
      display: inline;
    }
    .box2 {
      width: 10px;
      height: 50px;
      display: inline;
    }
    width: 300px;
    display: inline-block;
    padding: 20rpx;
  }
}
.container-inner{
  text-align: center;

}
.down{
  margin-top: 90px;
}
.container-table {
  display: flex;
  justify-content: center;
}
:deep(.el-table__header-wrapper){
  th{
    background-color: #f8f8f8;
    color: #000;
  }
  
}
</style>